<template>
  <layout :appHeader="{ title: $route.name }">
    <view class="container">
      <u-form :model="policy" ref="policyForm" label-width="150" class="policy-info">
        <u-form-item label="姓名" prop="name">
          <u-input v-model="policy.name" placeholder="請輸入姓名" />
        </u-form-item>
        <u-form-item label="證件號" prop="idNumber">
          <u-input v-model="policy.idNumber" placeholder="請輸入證件號" />
        </u-form-item>
        <u-form-item label="產品名稱" prop="productName">
          <u-input v-model="policy.productName" placeholder="請輸入產品名稱" />
        </u-form-item>
        <u-form-item label="保單號" prop="policyNumber">
          <u-input v-model="policy.policyNumber" placeholder="請輸入保單號" />
        </u-form-item>
        <u-form-item label="電話號碼" prop="mobile">
          <u-input v-model="policy.mobile" placeholder="請輸入電話號碼" />
        </u-form-item>
        <u-form-item label="家庭住址" prop="address">
          <u-input v-model="policy.address" placeholder="請輸入家庭住址" type="textarea" :auto-height="true" />
        </u-form-item>
      </u-form>
      <tui-button :disabled="disableSubmit" :loading="submitLoading" style="background-color:#515cc3;border-radius: 12rpx;" @click="handleSubmit()">提交托管</tui-button>
    </view>

  </layout>
</template>
<script>
import tuiButton from '@/components/thorui/tui-button/tui-button';
export default {
  data() {
    return {
      policy: {
        name: '',
        idNumber: '',
        policyNumber: '',
        mobile: '',
        address: '',
        productName: '',
      },
      submitLoading: false

    }
  },
  components: {
    tuiButton
  },
  computed: {
    disableSubmit() {
      if (this.policy.name && this.policy.idNumber && this.policy.policyNumber && this.policy.mobile && this.policy.address && this.policy.productName) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    handleSubmit() {
      this.submitLoading = true;
      uni.$API.WorkOrder.createEntrustment({
        ...this.policy
      }).then(res => {
        this.submitLoading = false;
        if (res.status === 200) {
          uni.$co.Fun.showToast('請求成功，我們會有專業人員和您聯繫，請耐心等待');
        }
      }).catch(error => {
        this.submitLoading = false;
      })


      setTimeout(() => {
        uni.navigateBack({ delta: 1 })
      }, 3000);
    }
  }
}
</script>
<style lang="scss">
.container {
  padding: 0 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 92vh;
}
.textarea-placeholder {
  margin-top: 30rpx;
}
::v-deep.uni-textarea-textarea {
  margin-top: 30rpx;
}
.policy-info {
  position: relative;
  margin-top: 24rpx;
  padding: 5rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}
.u-border-bottom:after {
  border-bottom-width: 0;
}
::v-deep.u-form-item--left__content__label {
  font-weight: bold !important;
}
.bottom-button {
  position: fixed;
  margin: 0 auto;
  bottom: 60rpx;
  left: 50%;
  transform: translate(-50%, 0);
  width: 92%;
  height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
  background: #515cc3;
  color: #fff;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>